  .clearfix::after{
    content: '';
    display: block;
    clear: both;
  }
  ol{ list-style: none;
  }
  
  #tool{
    position: fixed;
    top:-60px;
    right:-60px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: rgba(60, 60, 60, 0.8);
    transition:all 0.4s;
    z-index: 11;
  }

  #tool:hover{
    transform: scale(1.2);
    background-color: rgba(40, 40, 40, 0.9);
  }
  
  #xxx {position: fixed;top: 0;left: 0;
  }
  .eraserOn{
    /* cursor: url(./img/eraserRect.png) 20 0,auto; */
  }
  body{position: fixed;margin: 0;overflow: hidden;background-size: cover;background-image:url()
  }
  .toolBar{position: fixed;top: 10%;left: 5%;
  }
  .toolBar-inner{
    position: relative;
  }
  .toolBar-inner >.actions{
    float: left;
  }
  .toolBar-inner >.size{
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    height: 2.5em;
  }
  .size > #thin{
    float: left;
    width: 2em;
    height: 0.4em;
    margin: 0 1em;
  }
  .size > #bold{
    float: left;
    width: 2em;
    height: 0.7em;
    margin: 0 1em;
  }
  .size > div{
    background-color: black;
  }
  .size.active{
    background: red;
  }
  .icon { width: 2.5em; height: 2.5em;vertical-align: -0.4em;fill: currentColor;overflow: hidden;margin: 0 1em;
  }
  .actions svg{ transition: all 0.3s;
  }
  .actions svg.active{ fill: red;transform: scale(1.2);
  }
  #clear:hover,#download:hover{ fill: grey;
  }
  .colorPad{ position: fixed;top: 20%;left: 5%;padding: 0;
  }
  li{ border: 1px solid;border-radius: 50%;width: 1.75em;height: 1.75em;margin: 15px 1em;
  }
  .color{ transition: all 0.3s;
  }
  .color.active{ transform: scale(1.2);box-shadow: 0px 0px 4px 2px #bbb;
  }
  #black{ background: black;color: black;
  }
  #red{ background: red;color: red;
  }
  #green{ background: green;color: green;
  }
  #blue{ background: blue;color: blue;
  }